import classnames from 'classnames'

import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { channelType } from '@/types/data'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useState } from 'react'
import { addChannel, deletChannel, setActive } from '@/store/actions/channel'
import { Toast } from 'antd-mobile'
type Props = {
    hide: () => void,
    channels: channelType[],
    active: string,
}
const Channels = ({ hide, channels, active }: Props) => {
    const [isEdit, setEdit] = useState(false)
    const dispatch = useDispatch()
    const newChannel = useSelector((state: RootState) => {
        const { allchannel, channels } = state.channel
        return allchannel.filter(item => {
            const a = channels.find(it => it.id === item.id)
            return a ? false : true
        })
    })
    const chaneEdit = () => {
        setEdit(!isEdit)
    }
    const addchannel = async (channel: channelType) => {
        if (!isEdit) return
        console.log(channel, 123123);
        await dispatch(addChannel(channel))
    }
    const showdel = (id: number) => { //优化
        if (id === 0) {
            return Toast.show('不能删除推荐')
        } else if (id.toString() === active) {
            return Toast.show('不能删除当前频道')
        } else if (channels.length === 4) {
            return Toast.show('最少保留4个频道')
        }
        dispatch(deletChannel(id))
    }
    const changehandel = (id: number) => { //编辑功能
        if (isEdit) {
        return showdel(id)  
        }
        else{
            hide() //关闭弹窗
            return dispatch(setActive(id.toString()))
        }
    }
    return (
        <div className={styles.root}>
            <div className="channel-header">
                <Icon type="iconbtn_channel_close" onClick={hide} />
            </div>
            <div className="channel-content">
                {/* 编辑时，添加类名 edit */}
                <div className={classnames('channel-item', { 'edit': isEdit })}>
                    <div className="channel-item-header">
                        <span className="channel-item-title">我的频道</span>
                        <span className="channel-item-title-extra">{isEdit ? '删除我的频道' : '点击进入频道'}</span>
                        <span className="channel-item-edit" onClick={chaneEdit}>编辑</span>
                    </div>
                    {/* 这里放置我的频道 */}
                    <div className="channel-list">
                        {/* 选中时，添加类名 selected */}
                        {channels.map(item => (
                            <span className={classnames('channel-list-item', item.id.toString() === active ? 'selected' : '')} onClick={() => changehandel(item.id)} key={item.id}>
                                {item.name}
                                <Icon type="iconbtn_tag_close" />
                            </span>
                        ))}
                    </div>
                </div>

                <div className="channel-item">
                    <div className="channel-item-header">
                        <span className="channel-item-title">频道推荐</span>
                        <span className="channel-item-title-extra">点击添加频道</span>
                    </div>

                    {/* 这里放置推荐频道 */}
                    <div className="channel-list">
                        {
                            newChannel.map(item => (
                                <span className="channel-list-item" key={item.id} onClick={() => addchannel(item)}>+ {item.name}</span>
                            ))
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Channels